<template>
  <div class="app-container" v-loading="loading">
    <el-form :inline="true" :model="queryParams" label-width="100px" class="demo-form-inline">
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item >
            <el-input v-model="queryParams.skuCode" placeholder="SKU编码" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item >
            <el-input v-model="queryParams.skuName" placeholder="商品名称" clearable/>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item >
            <el-button icon="Search" type="primary" @click="getList">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>

    </el-form>
    <div>
      <el-button  type="primary"  >导出</el-button>
    </div>

    <vxe-table
        border
        show-overflow
        style="margin-top: 10px;"
        align="center"
        :data="tableList"
        :height="tableHeight"
        :checkbox-config="{ trigger:'row'}"
        :row-config="{isCurrent: true, isHover: true}"
         >
      <vxe-column type="checkbox"  width="80"></vxe-column>
      <vxe-column type="seq" width="80" title="序号"  ></vxe-column>
      <vxe-column field="skuCode" width="220" title="SKU编号"></vxe-column>
      <vxe-column field="skuName" width="300" title="商品名称"></vxe-column>
      <vxe-column field="companyName" width="150" title="公司名称" ></vxe-column>
      <vxe-column field="warehouseName" width="150" title="仓库名称" ></vxe-column>
      <vxe-column field="coverUrl" width="180" title="商品图片">
        <template #default="{row}">
          <ImagePreview v-if="row.coverUrl" :width="150" :height="50" :src="row.coverUrl" ></ImagePreview>
        </template>
      </vxe-column>
      <vxe-column field="earlyWarnDay" width="100" title="预警天数"></vxe-column>
      <vxe-column field="onhandNum" width="120" title="预警在仓数量"></vxe-column>
      <vxe-column field="returnDay" width="120" title="退货天数"></vxe-column>
      <vxe-column field="returnNum" width="120" title="自动退货数量"></vxe-column>
      <vxe-column field="warehouseName"  width="120" title="仓库"></vxe-column>
      <vxe-column field="lastTime"  width="220" title="更新时间"></vxe-column>
    </vxe-table>

    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
  </div>
</template>

<script setup>

import {nextTick, onMounted, reactive, ref} from "vue";
import ImagePreview from "@/components/ImagePreview/index.vue";
import {getSkuInventoryWarnList} from "@/api/scApi";

const queryParams = ref({
  pageNum:1,
  pageSize:10
})
let total=ref(0)
let loading=ref(false)

let tableHeight = ref(0);
nextTick(() => {
  tableHeight.value = window.innerHeight - 350;
})
window.onresize = () => {
  tableHeight.value = document.body.scrollHeight - 350;
}

onMounted(()=>{
  getList()
})

let tableList = ref([])
function getList(){
  loading.value=true
  let params={
    pageNum:queryParams.value.pageNum,
    pageSize:queryParams.value.pageSize,
    param:queryParams.value
  }
  getSkuInventoryWarnList(params).then(res=>{
    loading.value=false
    if(res.code===200){
      tableList.value =res.data
      total.value =res.total
    }
  }).finally(()=>{
    loading.value = false
  })
}

const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
  }
  getList();
};
</script>

<style scoped lang="scss">
.el-form-item{
  width: 90%;
}
</style>